import React,{Fragment} from 'react'
import ReactDOM from 'react-dom'
export default function Count(){

  const [count,setCount] = React.useState(0)  
  const [name,setName] = React.useState('Jimmy')  
  const inputRef = React.useRef()

  function addOne(){
    // setCount(count+1) 方法1 直接传递一个要改变的值
    setCount(preCount=>preCount+1) // 方法2 传递一个函数 返回值是要修改的值
  }

  function changeName(){
    setName('XUEXUE')
  }

  function showData(){
    /*
      ref.current = 绑定的元素
    */ 
    alert(inputRef.current.value)
  }

  
  
  function unMound(){
    // 卸载组件
    ReactDOM.unmountComponentAtNode(document.getElementById('root'))
  }

  return (
    /*
      页面组件中由于 JSX 的语法规范 一定要有一个根标签来进行包裹 大多时候我们可以选择使用一个 div 根标签来进行包裹
        但是我们实际上是可以简单的操作的 引入 React 的 Fragment标签
        使用 <Fragment>标签包裹 在页面渲染的时候 会自动的把 Fragment 抱歉给丢掉

        细节：
          Fragment标签虽然在渲染的时候会被丢掉 但是是可以传递key值的 （遍历的时候传的key值） 并且也是只能传递 key 作为属性 别的属性是没有用的
            也就是相当于这个 Fragment 是个无形的标签  

      还有一种方法可以 但是这样写的只能骗过 JSX 在遍历的时候是没有办法传递 key 值的
        render(){
          return(
            <>
              <h2>当前的值为：{count},{name}</h2>
              <input type="text" ref={inputRef}/>
              <button onClick={addOne}>点我+1</button>
            </>
          )
        }

      总结： 一般情况下使用 div标签当作根元素即可  如果实在不需要根就使用 Fragment 作为根  尽量不要去使用 空标签 来包裹
        
    */
    <Fragment>
      <h2>当前的值为：{count},{name}</h2>
      <input type="text" ref={inputRef}/>
      <button onClick={addOne}>点我+1</button>
      <button onClick={changeName}>点我改名</button>
      <button onClick={unMound}>卸载组件</button>
      <button onClick={showData}>展示数据</button>
    </Fragment>
  )
}